<template>
  <div class="item-wrap">
    <router-link :to="{path: '/detail', query: {field: 'massage', id: massageInfo.id}}">
      <div class="img">
        <img class="massage-img" :src="massageInfo.img" :alt="massageInfo.name" />
      </div>
      <div class="info">
        <h1 class="title">{{massageInfo.name}}</h1>
        <p class="stars">
          <star :star-info="{star:massageInfo.star,score:massageInfo.score}"></star>
        </p>
        <div class="others">
          <span class="item">
            ￥ <span class="price">{{massageInfo.default_price}}</span>元
          </span>
          <span class="item">{{massageInfo.city_name}}</span>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
  import Star from 'components/ScrollWrapper/Sub/Star.vue';

  export default {
    name: 'MassageItem',
    props: {
      massageInfo: Object
    },
    components: {
      Star
    }
  }
</script>

<style lang="scss" scoped="scoped">
  @import '~styles/mixins.scss';
  @import '~styles/variables.scss';

  .item-wrap {
    position: relative;
    border-bottom: 1px solid #ddd;
    background-color: #fff;

    .img {
      width: 1.2rem;
      height: 1.2rem;
      padding: .1rem;
      box-sizing: border-box;

      .massage-img {
        width: 100%;
        height: 100%;
      }
    }

    .info {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      overflow: hidden;
      padding: .1rem .1rem 0 1.2rem;
      box-sizing: border-box;

      .title {
        @include ellipsis;
        font-size: .16rem;
        line-height: .2rem;
      }

      .stars {
        line-height: .5rem;
      }

      .others {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: .14rem;
        line-height: .35rem;

        .price {
          color: #f60;
          font-size: .2rem;
        }
      }
    }
  }
</style>
